<template>
	<view class="box">
		<view>
			<pyh-nv ref="nv" :config="nvConfig" @nvInputTap="nvInputTap" @nvInput="nvInput" @nvFormSubmit="nvFormSubmit"
				@nvAddressTap="nvAddressTap"></pyh-nv>
			<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
				<view class="bg-img">

					<u-swiper :list="bannerList" :autoplay="true" circular="true">
					
					</u-swiper>

					<view class="bg-img-box">
						<view class="bg-img-box-content">
							<view class="_img">
								<image src="../../static/logo.png" mode=""></image>
							</view>
							<view class="bg-img-box-text">
								嗨！蒙蒙，欢迎来到至真健康生活馆！
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-box">
				<view class="content-left">
					<view class="content-left-text1">
						促销优惠活动
					</view>
					<view class="content-left-img">
						<view class="_img">
							<!-- <image src="../../static/首页_slices/优惠活动.png" mode=""></image> -->
						</view>
					</view>
					<view class="content-left-text2">
						正骨调理，耳穴治疗
					</view>
				</view>
				<view class="content-right">
					<view class="content-right-member">
						<view class="member">
							<view class="member-text1">
								会员卡购买
							</view>
							<view class="member-text2">
								疗程卡，储值卡
							</view>
						</view>
						<view class="member-img">
							<view class="_img">
								<!-- <image src="../../static/首页_slices/credit card.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="content-right-service">
						<view class="service">
							<view class="service-text1">
								客服中心
							</view>
							<view class="service-text2">
								联系客服，咨询
							</view>
						</view>
						<view class="service-img">
							<view class="_img">
								<!-- <image src="../../static/首页_slices/服务.png" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="member_">
			<view class="member-img">
				<image src="../../static/logo.png" mode=""></image>
			</view>
			<view class="member-info">
				<view class="member-info-top">
					疗程卡会员
				</view>
				<view class="member-info-bottom">
					剩余次数：20次
				</view>
			</view>
			<view class="member-examine">
				去预约
			</view>
		</view>
		<view class="content-health">
			<view class="health">
				<view class="health-left">
					<view class="health-left-text">
						养生分享
					</view>
					<view class="health-left-bg">
					</view>
				</view>
				<view class="health-right">
					查看全部
				</view>
			</view>
			<view class="content-health-list" v-for="(item,index) in healthData" :key="index">
				<view class="health-list-img">
					<view class="_img">
						<image :src="item.imgUrl" mode=""></image>
					</view>
				</view>
				<view class="health-list-info">
					<view class="text">
						<text class="text-jingxuan">精选</text>
						{{item.text}}
					</view>
					<view class="time">
						{{item.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	_index
	// } from '../../api/index.js'
	export default {
		onLoad() {
			this.getindex()
		},

		data() {
			return {
				bannerList: [],
				physicianList: [],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],

				nvConfig: {
					// componentsFlex:"bottom",//
					title: "pyh-nv 含搜索框导航栏",
					type: "search",
					back: {
						hide: true
					},
					bgColor: " rgba(255, 255, 255, 0.2)",
					color: "#000000",
					fixedAssist: {
						hide: true,
						// bgColor:"#2b9939"
					},
					transparent: {
						initColor: "#ffffff",
						// type:"content",//全透明为'content',背景透明不传或填'background'
						// anchor:200,//最终距离
					},
					mainColor: "#2b9939", //活动态主色
					// shadow: "0px 8px 8px -4px #999",//阴影box-shadow样式
					search: {
						icon: {
							hide: false, //控制搜索图标
							color: "", //如果有传可覆盖图标颜色，否则继承颜色
							size: 18 //图标大小，默认18
						},
						bgColor: "#f8f8f8",
						// color:"#2b9939",
						// focus:true,
						placeholder: "搜索您感兴趣的",
						// placeholderStyle:"color:#333",
						//confirmType:"search",//同input的confirm-type
						value: "", //如需要动态赋值，必须初始化
						input: true,
						// url:"/pages/index/index",
						//linkType:"",//跳转类型，navigateTo、redirectTo、reLaunch、switchTab
						btn: {
							// style:"background:#2b9939;"//会覆盖活动色mainColor
						}
					},
					// logo:{
					// 	url:"/pages/index/index"
					// },
					// btn:[
					// 	{
					// 		type:"点击1",
					// 		text:"点击1",
					// 		style:"color:#2b9939"
					// 	},
					// 	{
					// 		type:"点击2",
					// 		icon:"/static/logo.png"
					// 	}
					// ],
					// address:{
					// 	// bgColor:"#f8f8f8",
					// 	color:"#333",
					// 	province:"广东省",
					// 	city:"广州市",
					// 	county:"天河区",
					// 	fields:"province"
					// }
				},
				navHeight: 0,
				customTop: 0,
				customHeight: 0,
				findCoceralVal: '',
				healthData: [{
						id: 1,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					},
					{
						id: 2,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					},
					{
						id: 3,
						imgUrl: '../../static/logo.png',
						text: '中医艾灸的好处有哪些？中医艾灸的好处有哪些？',
						time: '2024-05-20'
					}
				]

			};
		},
		onPageScroll(e) {
			this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		// onLoad() {
		// 	let custom = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
		// 	let system = uni.getSystemInfoSync(); // 获取设备信息
		// 	this.navHeight = system.statusBarHeight + 44; // 导航栏的高度
		// 	this.customTop = custom.top; // 胶囊按钮与顶部的距离
		// 	this.customHeight = custom.height; // 胶囊按钮的高度
		// },
		methods: { //首页接口
			async getindex() {
				try {
					const response = await uni.$u.http.get('http://59.110.166.212/api/index/index');
					console.log(response.data.data.bannerList);
				
					const  images= response.data.data.bannerList.map(banner=>banner.image)
					console.log(images,"打印数组")
						this.bannerList = images;
					
				} catch (error) {
					console.error('Error fetching data:', error);

				}
			},

			nvInputTap(e) {
				console.log(e);
			},
			nvInput(e) {
				console.log(e.detail.value);
			},
			nvFormSubmit(e) {
				console.log(e.detail.value);
				uni.showModal({
					title: "pyh-nv",
					content: "input提交：" + JSON.stringify(e.detail.value)
				})
			},
			nvAddressTap(e) {
				console.log("点击了地址");
				// this.nvConfig.address.province = "湖南省"
				uni.showModal({
					title: "pyh-nv",
					content: "点击了地址"
				})
			}
			// joinCoceral() {
			// 	// 加入胶囊的点击事件逻辑
			// },
			// // 其他页面逻辑方法
			// handleChange(index) {
			//       // 处理轮播变化逻辑
			//     },
			//     handleClick(index) {
			//       // 处理轮播点击逻辑
			//     }
		}
	};
</script>

<style lang="less" scoped>
	.listBox {
		// background-image: url('../../static/联系客服_slices/全部6@2x.png');
		background-size: cover;
		/* 调整背景图大小以覆盖整个容器 */
		background-repeat: no-repeat;
		/* 禁止背景图重复 */
		padding: 88rpx 20rpx 20rpx;
	}

	// .list {
	//   background: #ffffff;
	//   border-radius: 20rpx;
	//   margin-bottom: 20rpx;
	//   padding: 16rpx 20rpx;
	//   text-align: center;
	// }

	.box {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.bg-img {
		position: relative;
		width: 100%;
		height: 513rpx;
		padding-top: 44px;
		// background-image: url('../../static/联系客服_slices/全部6@2x.png');
		background-size: cover;
		/* 等比缩放，保持宽高比，可能会裁切部分 */
		background-repeat: no-repeat;
		/* 不平铺 */
		background-position: center center;
		/* 居中显示 */
		font-size: 100%;

		.bg-img-box {
			position: absolute;
			left: -4rpx;
			bottom: -20rpx;

			.bg-img-box-content {
				display: flex;
				width: 720rpx;
				height: 62rpx;
				background: rgba(193, 156, 85);
				border-radius: 14rpx 14rpx 0rpx 0rpx;
				position: relative;

				._img {
					position: absolute;
					left: 28rpx;
					top: -35rpx;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}
				}

				.bg-img-box-text {
					width: 400rpx;
					height: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 62rpx;
					text-align: left;
					font-style: normal;
					margin-left: 112rpx;
				}
			}

		}
	}

	.content {
		width: 720rpx;
		height: 326rpx;
		background-color: #FFF;
		margin-left: 16rpx;
		padding: 20rpx 16rpx 24rpx 16rpx;

		.content-box {
			width: 688rpx;
			height: 283rpx;
			display: flex;

			.content-left {
				width: 338rpx;
				height: 283rpx;
				background: #F8ECCC;
				border-radius: 14rpx;
				margin-right: 12rpx;

				.content-left-text1 {
					margin-top: 22rpx;
					height: 44rpx;
					font-family: HelloFont, HelloFont;
					font-weight: normal;
					font-size: 34rpx;
					color: #CB8314;
					line-height: 44rpx;
					text-align: center;
					font-style: normal;
				}

				.content-left-text2 {
					height: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #927241;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
				}

				.content-left-img {
					display: flex;
					height: 94rpx;
					margin-top: 26rpx;
					margin-bottom: 22rpx;

					._img {
						margin: 0 auto;
						width: 90rpx;
						height: 94rpx;

						image {
							width: 90rpx;
							height: 94rpx;
						}
					}
				}
			}

			.content-right {
				width: 338rpx;
				height: 283rpx;

				.content-right-member {
					display: flex;
					width: 338rpx;
					height: 136rpx;
					background: #CEE3FC;
					border-radius: 14rpx;

					.member {
						.member-text1 {
							width: 174rpx;
							height: 44rpx;
							font-family: HelloFont, HelloFont;
							font-weight: normal;
							font-size: 34rpx;
							color: #298AFE;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-top: 22rpx;
							margin-bottom: 10rpx;
							margin-left: 18rpx;
						}

						.member-text2 {
							margin-left: 18rpx;
							width: 144rpx;
							height: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #57779C;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.member-img {
						width: 90rpx;
						height: 70rpx;
						margin-top: 34rpx;
						margin-left: 14rpx;

						._img {
							width: 90rpx;
							height: 70rpx;

							image {
								width: 90rpx;
								height: 70rpx;
							}
						}
					}
				}

				.content-right-service {
					display: flex;
					width: 338rpx;
					height: 136rpx;
					background: #EBFFE9;
					border-radius: 14rpx;
					margin-top: 10rpx;

					.service {
						.service-text1 {
							width: 138rpx;
							height: 44rpx;
							font-family: HelloFont, HelloFont;
							font-weight: normal;
							font-size: 34rpx;
							color: #4B9611;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-top: 24rpx;
							margin-bottom: 8rpx;
							margin-left: 18rpx;
						}

						.service-text2 {
							width: 144rpx;
							height: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #647361;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							margin-left: 18rpx;
						}

					}

					.service-img {
						width: 76rpx;
						height: 72rpx;
						margin-top: 32rpx;
						margin-left: 48rpx;

						._img {
							width: 76rpx;
							height: 72rpx;

							image {
								width: 76rpx;
								height: 72rpx;
							}
						}
					}
				}
			}
		}
	}

	.member_ {
		width: 722rpx;
		height: 118rpx;
		background-image: url('../../static/联系客服_slices/编组 13.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 722rpx auto;
		margin-left: 14rpx;
		margin-top: 20rpx;
		display: flex;

		.member-img {
			width: 60rpx;
			height: 60rpx;
			margin-left: 30rpx;
			margin-top: 32rpx;
			margin-right: 28rpx;
			background: #E1CE80;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.member-info {
			.member-info-top {
				height: 44rpx;
				margin-top: 18rpx;
				margin-bottom: 8rpx;
				font-family: HelloFont, HelloFont;
				font-weight: normal;
				font-size: 34rpx;
				color: #B28714;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.member-info-bottom {
				height: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #B28714;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.member-examine {
			margin-left: 285rpx;
			width: 130rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			line-height: 44rpx;
			text-align: center;
			margin-top: 40rpx;
			font-size: 22rpx;
			color: #B28714;
		}
	}

	.content-health {
		width: 720rpx;
		height: 824rpx;
		background: #FFFFFF;
		border-radius: 22rpx;
		margin-left: 16rpx;

		.health {
			width: 660rpx;
			height: 46rpx;
			line-height: 46rpx;
			display: flex;
			justify-content: space-between;
			margin-left: 22rpx;
			margin-bottom: 30rpx;
			margin-top: 20rpx;

			.health-left {
				margin-top: 20rpx;
				width: 146rpx;
				height: 44rpx;
				font-family: HelloFont, HelloFont;
				font-weight: 600;
				font-size: 34rpx;
				color: #2E2E2E;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				position: relative;

				.health-left-bg {
					width: 68rpx;
					height: 20rpx;
					background: rgba(163, 178, 111, 0.45);
					border-radius: 10rpx;
					position: absolute;
					left: 0;
					bottom: -4rpx;
				}
			}

			.health-right {
				width: 93rpx;
				height: 46rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #647361;
				line-height: 46rpx;
				text-align: left;
				font-style: normal;
				margin-top: 20rpx;
			}
		}

		.content-health-list {
			width: 686rpx;
			height: 222rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			display: flex;
			margin-bottom: 18rpx;
			margin-left: 16rpx;

			.health-list-img {
				width: 180rpx;
				height: 180rpx;
				margin-left: 22rpx;
				margin-top: 18rpx;
				margin-right: 22rpx;

				._img {
					width: 180rpx;
					height: 180rpx;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}
			}

			.health-list-info {
				width: 450rpx;
				height: 92rpx;
				line-height: 60rpx;
				margin-top: 14rpx;

				.text {
					.text-jingxuan {
						display: inline-block;
						width: 70rpx;
						height: 34rpx;
						background: #CB8314;
						border-radius: 14rpx 0rpx 14rpx 0rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
						font-style: normal;
						margin-right: 10rpx;
					}

					.text-issue {
						margin-top: 30rpx;
						margin-left: 10rpx;
					}
				}

				.time {
					width: 450rpx;
					height: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #CCCCCC;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>